<ui:component xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:m="http://www.ol4jsf.org"
	xmlns:o="http://openfaces.org/"
	xmlns:a4j="http://richfaces.org/a4j">

	<script type="text/javascript">
		var offsetFeatures1;
		var offsetFeatures2;

		function pickOffset1() {
			getPickSinglePointControl().deactivate();
			
			getPickPointControl().events.remove('featureadded');
			getPickPointControl().events.register('featureadded', this, addedOffsetLine1);
			getPickPointControl().activate();
		}
		function pickOffset2() {
			getPickSinglePointControl().deactivate();
			
			getPickPointControl().events.remove('featureadded');
			getPickPointControl().events.register('featureadded', this, addedOffsetLine2);
			getPickPointControl().activate();
		}
		
		function addedOffsetLine1(evt) {
			var offsetFeature = evt.feature;
			var geom = offsetFeature.geometry;
			
			offsetFeatures1 = addOffsetFeatures(offsetFeature, offsetFeatures1, false);
			setOffsetControls(geom,
					#{rich:element('initialPoint1Y')},
					#{rich:element('initialPoint1X')},
					#{rich:element('bearing1')},
					#{rich:element('distance1')});

			setSplitInput1();

			getPickPointControl().deactivate();
			method3SubmitPoint1();
		}
		function addedOffsetLine2(evt) {
			var offsetFeature = evt.feature;
			var geom = offsetFeature.geometry;
			
			offsetFeatures2 = addOffsetFeatures(offsetFeature, offsetFeatures2, false);
			setOffsetControls(geom,
					#{rich:element('initialPoint2Y')},
					#{rich:element('initialPoint2X')},
					#{rich:element('bearing2')},
					#{rich:element('distance2')});

			setSplitInput2();
			
			getPickPointControl().deactivate();
			method3SubmitPoint2();
		}
		
		function setLineLength1() {
			var dist = #{rich:element('distance1')}.value;
			if (!isNumber(dist)) {
				alert('#{messages["txt.invalid_numeric_format"]}');
				return;
			}
			
			var layer = offsetFeatures1[0].layer;
			var newFeatures = setLineLength(offsetFeatures1[0], dist);
			layer.addFeatures(newFeatures[0]);
			
			offsetFeatures1 = addOffsetFeatures(newFeatures[0], offsetFeatures1, false);
			setSplitInput1();

			getPickPointControl().deactivate();
			method3SubmitPoint1();
		}
		function setLineLength2() {
			var dist = #{rich:element('distance2')}.value;
			if (!isNumber(dist)) {
				alert('#{messages["txt.invalid_numeric_format"]}');
				return;
			}
			
			var layer = offsetFeatures2[0].layer;
			var newFeatures = setLineLength(offsetFeatures2[0], dist);
			layer.addFeatures(newFeatures[0]);
			
			offsetFeatures2 = addOffsetFeatures(newFeatures[0], offsetFeatures2, false);
			setSplitInput2();
			
			getPickPointControl().deactivate();
			method3SubmitPoint2();
		}

		function setSplitInput1() {
			#{rich:element('method3SplitYInput1')}.value = offsetFeatures1[2].geometry.y;
			#{rich:element('method3SplitXInput1')}.value = offsetFeatures1[2].geometry.x;
		}
		function setSplitInput2() {
			#{rich:element('method3SplitYInput2')}.value = offsetFeatures2[2].geometry.y;
			#{rich:element('method3SplitXInput2')}.value = offsetFeatures2[2].geometry.x;
		}
		
		function resetMethod3Inputs() {
			#{rich:element('initialPoint1Y')}.value = '';
			#{rich:element('initialPoint1X')}.value = '';
			#{rich:element('bearing1')}.value = '';
			#{rich:element('distance1')}.value = '';
			#{rich:element('initialPoint2Y')}.value = '';
			#{rich:element('initialPoint2X')}.value = '';
			#{rich:element('bearing2')}.value = '';
			#{rich:element('distance2')}.value = '';
			#{rich:element('method3SplitYInput1')}.value = '';
			#{rich:element('method3SplitXInput1')}.value = '';
			#{rich:element('method3SplitYInput2')}.value = '';
			#{rich:element('method3SplitXInput2')}.value = '';
		}
	</script>

	<h:form>
		<rich:toolBar height="20" itemSeparator="grid">
			<rich:toolBarGroup>
				<h:panelGroup>
					<o:commandButton type="button" onclick="clearBoundary()">
						<rich:toolTip followMouse="true" direction="bottom-right" showDelay="500" styleClass="tooltip">
							<span style="white-space:nowrap">
								Borrar todo
							</span>
						</rich:toolTip>
						<h:graphicImage value="/img/delete-all-icon.png" />
					</o:commandButton>
				</h:panelGroup>
			</rich:toolBarGroup>
			
			<rich:toolBarGroup location="right">
				<h:panelGroup>
					<o:commandButton type="button" onclick="drawBoundary();">
						<rich:toolTip followMouse="true" direction="bottom-left" showDelay="500" styleClass="tooltip">
							<span style="white-space:nowrap">
								Dibujar frontera
							</span>
						</rich:toolTip>
						<h:graphicImage value="/img/draw-icon.png" />
					</o:commandButton>
				</h:panelGroup>
			</rich:toolBarGroup>
		</rich:toolBar>
	</h:form>

	<table style="width: 100%">
		<tr valign="top">
			<td style="width: 50%">
				<!-- Left column -->
				
				<table style="width: 90%">
					<tr>
						<th colspan="2" align="left">
							<table style="width: 100%">
								<tr>
									<td width="50%">
										<h:outputText value="Punto de Referencia #1" />
									</td>
									<td align="right">
										<a href="#" onclick="pickOffset1()">#{messages['button.select']}</a>
									</td>
								</tr>
							</table>
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="initialPoint1Y" readonly="true" value="" style="width: 100%"/>
						</td>
						<th>
							<rich:spacer/>
							<h:outputText value=" N" />
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="initialPoint1X" readonly="true" value="" style="width: 100%"/>
						</td>
						<th>
							<rich:spacer/>
							<h:outputText value=" E" />
						</th>
					</tr>
				</table>
				
				<br />
				
				<table style="width: 90%">
					<tr>
						<th align="left">
							<table style="width: 100%">
								<tr>
									<td width="50%">
										<h:outputText value="Rumbo" />
									</td>
									<td align="right">
									</td>
								</tr>
							</table>
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="bearing1" value="" readonly="true" style="width: 100%"/>
						</td>
					</tr>
				</table>
				
				<br />
				
				<table style="width: 90%">
					<tr>
						<th align="left">
							<table style="width: 100%">
								<tr>
									<td width="50%">
										<h:outputText value="Distancia" />
									</td>
									<td align="right">
										<a href="#" onclick="setLineLength1()">#{messages['button.set']}</a>
									</td>
								</tr>
							</table>
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="distance1" value="" style="width: 100%"/>
						</td>
					</tr>
				</table>
			</td>
			
			<td style="width: 50%">
				<!-- Right column -->
				<table style="width: 90%">
					<tr>
						<th colspan="2" align="left">
							<table style="width: 100%">
								<tr>
									<td width="50%">
										<h:outputText value="Punto de Referencia #2" />
									</td>
									<td align="right">
										<a href="#" onclick="pickOffset2()">#{messages['button.select']}</a>
									</td>
								</tr>
							</table>
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="initialPoint2Y" readonly="true" value="" style="width: 100%"/>
						</td>
						<th>
							<rich:spacer/>
							<h:outputText value=" N" />
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="initialPoint2X" readonly="true" value="" style="width: 100%"/>
						</td>
						<th>
							<rich:spacer/>
							<h:outputText value=" E" />
						</th>
					</tr>
				</table>
				
				<br />
				
				<table style="width: 90%">
					<tr>
						<th align="left">
							<table style="width: 100%">
								<tr>
									<td width="50%">
										<h:outputText value="Rumbo" />
									</td>
									<td align="right">
									</td>
								</tr>
							</table>
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="bearing2" value="" readonly="true" style="width: 100%"/>
						</td>
					</tr>
				</table>
				
				<br />
				
				<table style="width: 90%">
					<tr>
						<th align="left">
							<table style="width: 100%">
								<tr>
									<td width="50%">
										<h:outputText value="Distancia" />
									</td>
									<td align="right">
										<a href="#" onclick="setLineLength2()">#{messages['button.set']}</a>
									</td>
								</tr>
							</table>
						</th>
					</tr>
					<tr>
						<td>
							<h:inputText id="distance2" value="" style="width: 100%"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

	<h:form>
		<h:inputHidden id="method3SplitXInput1" value="#{interactiveViewerHelper.borderHelper.borderPoint.x}" />
		<h:inputHidden id="method3SplitYInput1" value="#{interactiveViewerHelper.borderHelper.borderPoint.y}" />

		<a4j:jsFunction name="method3SubmitPoint1"
			action="#{interactiveViewerHelper.borderHelper.setBoundaryPoint(0)}"
			reRender="coords, bearingAndDistanceTable, drawBoundaryFunctions"
			oncomplete="drawBoundaryReRender()">
		</a4j:jsFunction>
	</h:form>

	<h:form>
		<h:inputHidden id="method3SplitXInput2" value="#{interactiveViewerHelper.borderHelper.borderPoint.x}" />
		<h:inputHidden id="method3SplitYInput2" value="#{interactiveViewerHelper.borderHelper.borderPoint.y}" />

		<a4j:jsFunction name="method3SubmitPoint2"
			action="#{interactiveViewerHelper.borderHelper.setBoundaryPoint(1)}"
			reRender="coords, bearingAndDistanceTable, drawBoundaryFunctions"
			oncomplete="drawBoundaryReRender()">
		</a4j:jsFunction>
	</h:form>
</ui:component>
